<template>
  <div center>
    <el-form ref="info" :inline="true" :rules="rules" :model="info" size="mini" label-position="right"
             label-width="110px">
      <el-form-item label="检测类型" prop="jclx">
        <el-select v-model="info.jclx" filterable placeholder="请选择" :disabled="isShow">
          <el-option
            v-for="item in jclxList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测编号" prop="jcbh">
        <el-input v-model="info.jcbh" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="调查日期" prop="dcrq">
        <el-date-picker
          v-model="info.dcrq"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="受监测单位" prop="sjcdwmc">
        <el-input v-model="info.sjcdwmc" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="受监单位地址" prop="sjcdwdz">
        <el-input v-model="info.sjcdwdz" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="行业分类\代码" prop="hyfljdm">
        <el-input v-model="info.hyfljdm" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="单位性质" prop="dwxz">
        <el-select v-model="info.dwxz" filterable placeholder="请选择" :disabled="isShow">
          <el-option
            v-for="item in dwxzList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人" prop="lxr">
        <el-input v-model="info.lxr" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="lxdh">
        <el-input v-model="info.lxdh" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="检测范围" prop="jcfw">
        <el-input v-model="info.jcfw" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="主要产品\产量" prop="zycpjcl">
        <el-input v-model="info.zycpjcl" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item v-if="!isShow">
        <el-button type="warning" size="mini" @click="addTable1(null,null)">添加</el-button>
      </el-form-item>
      <el-table
        key="table1"
        :data="info.table1Json"
        style="width: 100%">
        <el-table-column
          prop="jobWord"
          align="center"
          label="作业工种/岗位">
        </el-table-column>
        <el-table-column
          prop="operatingPoint"
          align="center"
          label="作业点">
        </el-table-column>
        <el-table-column label="生产设备" align="center">
          <el-table-column
            prop="productionName"
            align="center"
            label="名称">
          </el-table-column>
          <el-table-column label="数量" align="center">
            <el-table-column
              prop="productionSum"
              align="center"
              label="总">
            </el-table-column>
            <el-table-column
              align="center"
              prop="productionOpen"
              label="开启">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="harm"
          align="center"
          label="职业病危害因素">
        </el-table-column>
        <el-table-column
          prop="contactNum"
          align="center"
          label="接触人数">
        </el-table-column>
        <el-table-column label="作业方式" align="center">
          <el-table-column
            prop="homeworkInspection"
            width="40"
            align="center"
            label="巡检">
          </el-table-column>
          <el-table-column
            prop="homeworkManual"
            width="40"
            align="center"
            label="手工">
          </el-table-column>
          <el-table-column
            prop="homeworkMachinery"
            align="center"
            width="60"
            label="机械操作">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="frequency"
          align="center"
          label="接触频次">
        </el-table-column>
        <el-table-column
          prop="contactDaily"
          align="center"
          label="日接触时间(h)">
        </el-table-column>
        <el-table-column label="职业病防护设施情况" align="center">
          <el-table-column
            prop="protective"
            align="center"
            label="名称">
          </el-table-column>
          <el-table-column label="数量" align="center">
            <el-table-column
              prop="protectiveNum"
              align="center"
              label="总">
            </el-table-column>
            <el-table-column
              align="center"
              prop="protectiveOpen"
              label="开启">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="protectiveWear"
          align="center"
          label="个体防护用品(名称、型号、相关参数)及佩戴情况">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作" v-if="!isShow">
          <template slot-scope="scope">
            <el-button @click="addTable1(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delTable1(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <el-form-item v-if="!isShow">
        <el-button type="warning" size="mini" @click="addTable2(null,null)">添加</el-button>
      </el-form-item>
      <el-table key="table2" border :data="info.table2Json" style="width: 100%">
        <el-table-column
          prop="type"
          align="center"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="物料名称">
        </el-table-column>
        <el-table-column
          prop="character"
          align="center"
          label="性状">
        </el-table-column>
        <el-table-column
          prop="dosage"
          align="center"
          label="用量/或产生量">
        </el-table-column>
        <el-table-column
          prop="composition"
          align="center"
          label="主要成份及含量">
        </el-table-column>
        <el-table-column
          prop="area"
          align="center"
          label="接触的工种及地点">
        </el-table-column>
        <el-table-column
          prop="instructions"
          align="center"
          label="操作人员接触方式说明">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作" v-if="!isShow">
          <template slot-scope="scope">
            <el-button @click="addTable2(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delTable2(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="8">
          <!--          <el-form-item label="生产工艺流程图" prop="scgylct">-->
          <!--            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="info.scgylct" placeholder="请输入内容"-->
          <!--                      :disabled="isShow"/>-->
          <!--          </el-form-item>-->
        </el-col>
        <el-col :span="16">
          <el-form-item label="生产工艺流程图" prop="scgylctImgJson">
            <imgUpdate v-model="info.scgylctImgJson" :file-key="info.id+'scgylctImgJson'" :max-limit="20"
                       :isDisabled="isShow"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <!--          <el-form-item label="设备布局图" prop="scgylct">-->
          <!--            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="info.sbbjt" placeholder="请输入内容"-->
          <!--                      :disabled="isShow"/>-->
          <!--          </el-form-item>-->
        </el-col>
        <el-col :span="16">
          <el-form-item label="设备布局图" prop="sbbjtImgJson">
            <imgUpdate v-model="info.sbbjtImgJson" :file-key="info.id+'sbbjtImgJson'" :max-limit="20"
                       :isDisabled="isShow"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="调查人" prop="dcr">
            <el-select v-model="info.dcr" :disabled="isShow" multiple placeholder="请选择" :multiple-limit="2">
              <el-option
                v-for="item in userList"
                :label="item.nickName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="受检单位陪同人">
            <el-input type="text" autosize v-model="info.sjcdwptr" disabled placeholder="打印后手签"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>
    <div style="text-align: center" v-if="!isShow">
      <el-button type="primary" size="small" @click="addOrEdit">保存</el-button>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" append-to-body center width="80%">
      <el-form ref="tableInfo" :inline="true" :rules="rules" :model="tableInfo" size="mini" label-position="right"
               label-width="200px">
        <el-row type="flex" :gutter="20">
          <el-col :span="12">
            <el-form-item label="作业工种/岗位:" prop="jobWord">
              <el-input v-model="tableInfo.jobWord" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="作业点:" prop="operatingPoint">
              <el-input v-model="tableInfo.operatingPoint" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="生产设备-名称:" prop="productionName">
              <el-input v-model="tableInfo.productionName" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="生产设备-总数:" prop="productionSum">
              <el-input type="number" v-model="tableInfo.productionSum" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="生产设备-开启数:" prop="productionOpen">
              <el-input type="number" v-model="tableInfo.productionOpen" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="接触频次:" prop="frequency">
              <el-input type="number" v-model="tableInfo.frequency" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="日接触总时间(h):" prop="frequency">
              <el-input type="number" v-model="tableInfo.contactDaily" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="日接触时间1(h):" prop="frequency">
              <el-input type="number" v-model="tableInfo.contactDaily1" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="日接触时间2(h):" prop="frequency">
              <el-input type="number" v-model="tableInfo.contactDaily2" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="日接触时间3(h):" prop="frequency">
              <el-input type="number" v-model="tableInfo.contactDaily3" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职业病危害因素:" prop="harm">
              <el-input v-model="tableInfo.harm" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="接触人数:" prop="contactNum">
              <el-input type="number" v-model="tableInfo.contactNum" placeholder="请输入内容"/>
            </el-form-item>

            <el-form-item label="作业方式-巡检" prop="homeworkInspection">
              <el-select v-model="tableInfo.homeworkInspection" placeholder="请选择" filterable
                         @blur="selectBlurHomeworkInspection">
                <el-option key="0" label="空️" value="️"/>
                <el-option key="1" label="✓️" value="✓"/>
              </el-select>
            </el-form-item>
            <el-form-item label="作业方式-手工:" prop="homeworkManual">
              <el-select v-model="tableInfo.homeworkManual" placeholder="请选择" filterable
                         @blur="selectBlurHomeworkManual">
                <el-option key="0" label="️空" value="️"/>
                <el-option key="1" label="✓️" value="✓️"/>
              </el-select>
            </el-form-item>
            <el-form-item label="作业方式-操作机械:" prop="homeworkMachinery">
              <el-select v-model="tableInfo.homeworkMachinery" placeholder="请选择" filterable
                         @blur="selectBlurHomeworkMachinery">
                <el-option key="0" label="空️" value="️"/>
                <el-option key="1" label="✓️" value="✓️"/>
              </el-select>
            </el-form-item>
            <el-form-item label="职业病防护设施情况-名称:" prop="frequency">
              <el-input v-model="tableInfo.protective" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="职业病防护设施情况-总数:" prop="productionSum">
              <el-input type="number" v-model="tableInfo.protectiveNum" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="职业病防护设施情况-开启数:" prop="productionOpen">
              <el-input type="number" v-model="tableInfo.protectiveOpen" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="个体防护用品及配戴情况:" prop="frequency">
              <el-select v-model="tableInfo.protectiveWear" multiple filterable placeholder="请选择">
                <el-option
                  v-for="item in protectiveWearList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="addOrEditTable1">确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="centerDialogVisible2" append-to-body center width="80%">
      <el-form ref="tableInfo" :inline="true" :rules="rules" :model="tableInfo" size="mini" label-position="right"
               label-width="200px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="物料类型:" prop="type">
              <el-select v-model="tableInfo.type" placeholder="请选择">
                <el-option label="原材料" value="原材料"></el-option>
                <el-option label="产品" value="产品"></el-option>
                <el-option label="副产品" value="副产品"></el-option>
                <el-option label="中间产品" value="中间产品"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物料名称:" prop="name">
              <el-input v-model="tableInfo.name" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="操作人员接触方式说明:" prop="instructions">
              <el-input v-model="tableInfo.instructions" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性状:" prop="character">
              <el-select v-model="tableInfo.character" placeholder="请选择" filterable @blur="selectBlurCharacter">
                <el-option label="固态" value="固态"></el-option>
                <el-option label="液态" value="液态"></el-option>
                <el-option label="气态" value="气态"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用量/产生量:" prop="dosage">
              <el-input v-model="tableInfo.dosage" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主要成份及含量:" prop="composition">
              <el-input v-model="tableInfo.composition" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="接触的工种及地点:" prop="area">
              <el-input v-model="tableInfo.area" placeholder="请输入内容"/>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible2 = false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="addOrEditTable2">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import imgUpdate from '@/components/Upload/imgUpdate'
import { addOrEdit, getInfo } from '@/api/table/tableOne'
import { getUserList } from '@/api/system/sysUser'
import { getUserId } from '@/utils/auth'
import { getList } from '@/api/system/protectiveWear.js'

export default {
  components: {
    imgUpdate
  },
  props: {
    noCreated: {
      type: Boolean,
      default: null
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      jclxList: [{
        value: '定期',
        label: '定期'
      }, {
        value: '评价',
        label: '评价'
      }, {
        value: '其他',
        label: '其他'
      }, {
        value: '委托',
        label: '委托'
      }, {
        value: '监督',
        label: '监督'
      }],
      dwxzList: [{
        value: '国有企业',
        label: '国有企业'
      }, {
        value: '集体企业',
        label: '集体企业'
      }, {
        value: '私营企业',
        label: '私营企业'
      }, {
        value: '联营企业',
        label: '联营企业'
      }, {
        value: '股份制企业',
        label: '股份制企业'
      }, {
        value: '外资企业',
        label: '外资企业'
      }, {
        value: '港澳台企业',
        label: '港澳台企业'
      }, {
        value: '个体经济',
        label: '个体经济'
      }, {
        value: '有限责任公司',
        label: '有限责任公司'
      }, {
        value: '有限公司',
        label: '有限公司'
      }, {
        value: '其他企业',
        label: '其他企业'
      }],
      protectiveWearList: [],
      info: { jcbh: 'NWJC' },
      userId: getUserId(),
      userList: [],
      tableInfo: {},
      tableIndex: null,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      rules: {
        jclx: [{ required: true, message: '请输入内容', trigger: 'chang' }],
        jcbh: [{ required: true, message: '请输入内容', trigger: 'chang' }],
        dcrq: [{ required: true, message: '请选择日期', trigger: 'chang' }],
        sjcdwmc: [{ required: true, message: '请输入内容', trigger: 'chang' }],
        sjcdwptr: [{ required: true, message: '请输入内容', trigger: 'chang' }],
        dcr: [{ required: true, message: '请选择内容', trigger: 'chang' }]
      }
    }
  },
  created() {
    this.getUserList()
    this.getWearList()
    this.info.jcbh = 'NWJC'
    this.info.table1Json = []
    this.info.table2Json = []
  },
  methods: {
    selectBlurCharacter(e) {
      if (e.target.value) {
        this.tableInfo.character = e.target.value
      }
    },
    selectBlurHomeworkInspection(e) {
      if (e.target.value) {
        this.tableInfo.homeworkInspection = e.target.value
      }
    },
    selectBlurHomeworkManual(e) {
      if (e.target.value) {
        this.tableInfo.homeworkManual = e.target.value
      }
    },
    selectBlurHomeworkMachinery(e) {
      if (e.target.value) {
        this.tableInfo.homeworkMachinery = e.target.value
      }
    },
    getWearList() {
      getList(1).then(response => {
        if (response.code == 0) {
          this.protectiveWearList = []
          response.data.forEach(item => {
            this.protectiveWearList.push({
              value: item.name,
              label: item.name
            })
          })
        }
      })
    },
    // 新增或编辑表1
    addTable1(index, row) {
      this.tableIndex = index
      this.tableInfo = {}
      if (row != null) {
        this.tableInfo = row
      } else {
        this.tableInfo = {
          homeworkMachinery: null,
          homeworkManual: null,
          homeworkInspection: null,
          protectiveWear: null,
          protectiveOpen: null,
          protectiveNum: null,
          protective: null,
          contactDaily: null,
          contactDaily1: null,
          contactDaily2: null,
          contactDaily3: null,
          frequency: null,
          contactNum: null,
          harm: null,
          productionOpen: null,
          productionSum: null,
          productionName: null,
          operatingPoint: null,
          jobWord: null
        }
      }
      this.centerDialogVisible = true
    },
    // 保存表1
    addOrEditTable1() {
      if (this.tableIndex == null) {
        this.info.table1Json.push(this.tableInfo)
      } else {
        this.info.table1Json.splice(this.tableIndex, 1, this.tableInfo)
      }
      this.centerDialogVisible = false
    },
    // 删除表1
    delTable1(index, row) {
      this.info.table1Json.splice(index, 1)
    },
    // 新增或编辑表2
    addTable2(index, row) {
      this.tableIndex = index
      this.tableInfo = {}
      if (row != null) {
        this.tableInfo = row
      } else {
        this.tableInfo = {
          character: null
        }
      }
      this.centerDialogVisible2 = true
    },
    // 保存表1
    addOrEditTable2() {
      if (this.tableIndex == null) {
        this.info.table2Json.push(this.tableInfo)
      } else {
        this.info.table2Json.splice(this.tableIndex, 1, this.tableInfo)
      }
      this.centerDialogVisible2 = false
    },
    // 删除表1
    delTable2(index, row) {
      this.info.table2Json.splice(index, 1)
    },
    // 获取所有用户
    getUserList() {
      getUserList().then(response => {
        this.userList = response.data
      })
    },
    getInfo(id) {
      getInfo(id).then(response => {
        response.data.table1Json = JSON.parse(response.data.table1Json)
        response.data.table2Json = JSON.parse(response.data.table2Json)
        if (response.data.dcr != null && response.data.dcr != '') {
          response.data.dcr = JSON.parse(response.data.dcr)
          var ids = []
          for (let i = 0; i < response.data.dcr.length; i++) {
            ids.push(response.data.dcr[i].id)
          }
          response.data.dcr = ids
        }

        this.info = response.data

      })
    },
    addOrEdit: function() {
      this.$refs['info'].validate((valid) => {
        if (valid) {
          addOrEdit(this.info.id, this.info.jclx, this.info.jcbh, this.info.dcrq, this.info.sjcdwmc, this.info.sjcdwdz, this.info.hyfljdm, this.info.dwxz, this.info.lxr, this.info.lxdh, this.info.jcfw, this.info.zycpjcl, this.info.scgylct, this.info.sbbjt, this.info.scgylctImgJson, this.info.sbbjtImgJson, JSON.stringify(this.info.dcr), this.info.sjcdwptr, JSON.stringify(this.info.table1Json), JSON.stringify(this.info.table2Json), this.info.shjl, this.info.jy).then(response => {
            if (this.info.id == null) {
              // 新增
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$parent.$parent.$parent.$parent.$parent.getData()

            } else {
              // 编辑
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
            response.data.table1Json = JSON.parse(response.data.table1Json)
            response.data.table2Json = JSON.parse(response.data.table2Json)
            if (response.data.dcr != null && response.data.dcr != '') {
              response.data.dcr = JSON.parse(response.data.dcr)
              var ids = []
              for (let i = 0; i < response.data.dcr.length; i++) {
                ids.push(response.data.dcr[i].id)
              }
              response.data.dcr = ids
            }
            this.info = response.data
            this.$parent.$parent.$parent.$parent.$parent.centerDialogVisible = false
          })
        }
      })
    },
    // 初始化
    init(id) {
      if (id != null) {
        this.getInfo(id)
      } else {
        this.info = { jcbh: 'NWJC', table1Json: [], table2Json: [] }
      }
    }
  }
}
</script>

